<template>
  <div>
    <!-- 灰线包裹盒子 -->
    <div class="login_box">
           <!-- 新用户注册 -->
      <div class="account_number">新用户注册</div>
      <!-- 用户注册 -->
      <div class="login_title">很高兴您将成为商城的会员(注册只需一步)</div>
      <!-- 账号密码框 -->
      <div class="user_pas">
        <!-- @submit="onSubmit" -->
        <van-form>
          <van-field
            v-model="user"
            placeholder="手机号码"
            :rules="[{ required: true, message: '手机号码' }]"
            class="van-field"
          />
          <van-field
            v-model="password"
            type="password"
            placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]"
            class="van-field2"
          />
          <van-field
            v-model="password"
            type="password"
            placeholder="确认密码"
            :rules="[{ required: true, message: '请填写密码' }]"
            class="van-field2"
          />
          <van-field
            placeholder="用户名"
            :rules="[{ required: true, message: '手机号码' }]"
            class="van-field"
          />
          <van-field
            placeholder="验证码"
            :rules="[{ required: true, message: '手机号码' }]"
            class="van-field"
          />
          <van-field
            :rules="[{ required: true, message: '手机号码' }]"
            class="van-field"
          />
          <van-field
            placeholder="获取验证码"
            :rules="[{ required: true, message: '手机号码' }]"
            class="van-field"
          />
          <div style="margin: 16px">
            <van-button
              round
              block
              type="info"
              native-type="submit"
              class="van-bgc"
              @click="addlogin"
            >
              立即注册
            </van-button>
          </div>
        </van-form>
      </div>
      <!-- 忘记密码立即注册 -->
      <div class="van-bttom">
        <!-- 立即注册 -->
        <p>
          <a href="#" @click="loginpage">已有账号？立即登录</a>
        </p>
      </div>
    </div>
  </div> 
</template>

<script>
export default {
  data() {
    return {
      user: "",
      password: "",
    };
  },
  methods: {
    addlogin() {
      this.$API.getLogin(this.user, this.password).then((res) => {
        console.log(res);
        if (res.data.code == 500) {
          alert("注册失败");
        } else {
          if (this.user === "" || this.password === "") {
            alert("用户名或者密码不能为空");
            return;
          }
          alert("注册成功");
          localStorage.setItem("token", res.data.data.token);
          this.$router.push({ path: "/" });
        }
      });
    },
    // 跳转到注册页面
    loginpage() {
      this.$router.push({ path: "/loginpage" });
    },
  },
};
</script>

<style lang="scss">
body {
  background: white;
}
.login_box {
  width: 90%;
  height: 90vh;
  border: 1px rgb(235, 232, 232) solid;
  margin: 10px auto;
  color: grey;
  box-sizing: border-box;
  padding: 10px;
  // 登录账号
  .account_number {
    width: 100%;
    height: 10vh;
    line-height: 10vh;
    // background: pink;
    font-size: 0.5rem;
    color: black;
  }
  //   虾米标题介绍
  .login_title {
    width: 100%;
    height: 6vh;
    line-height: 6vh;
    // background-color: lavender;
  }
  //   账号密码框
  .user_pas .van-field {
    width: 90%;
    margin: 0 auto;
    border: 1px silver solid;
    border-radius: 5px;
    // background: cornsilk;
    margin-top: 0.5rem;
  }
  .user_pas .van-field2 {
    border: 1px silver solid;
    margin-top: 0.4rem;
  }
  .van-bgc {
    width: 100%;
    height: 7vh;
    margin: 0 auto;
    border: none;
    outline: none;
    background: linear-gradient(90deg, #5ea6f8, #bb87f6);
    box-shadow: 0 5px 3px rgba(0, 0, 0, 0.3);
  }
  //  立即登录
  .van-bttom {
    text-align: center;
    p {
      &:nth-child(1) {
        margin-top: 0.5rem;
      }
      &:nth-child(2) {
        margin-top: 0.8rem;
      }
    }
  }
}
</style>